<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas{
            display: block;
            margin: 0 auto;
            border:1px #888 solid;
        }
    </style>
</head>
<body>
<canvas>

</canvas>

<script>

    var canvas = document.querySelector("canvas");
    canvas.width = 800;
    canvas.height = 600;
    var ctx = canvas.getContext("2d");
    
    function ball(x,y,r,color,speedX,speedY){
        this.x=x;
        this.y=y;
        this.r=r;
        this.color=color;
        this.speedX=speedX;
        this.speedY=speedY;
    }

    ball.prototype=  {
     drawArc:function(){

      ctx.beginPath()
      ctx.arc(this.x,this.y,this.r,0,Math.PI*2);
      ctx.fillStyle = this.color;
      ctx.fill();
      ctx.closePath();

        },
        move:function(){

        if(this.x+this.r+this.speedX > canvas.width || this.x-this.r+this.speedX < 0){
            this.speedX = -this.speedX;
        }
        if(this.y+this.r+this.speedY > canvas.height || this.y-this.r+this.speedY < 0){
            this.speedY = -this.speedY;
        }


          this.x += this.speedX;
          this.y += this.speedY;
        }
        
    }

    var num=100;
    var arr=[];
    for(let i=0;i<num;i++){

          var r=random(5,20);
          var x=random(r,800);
          var y=random(r,600);
          var color=`rgb(${random(0,255)},${random(0,255)},${random(0,255)})`;
          var speedX=3;
          var speedY=10;
          var ballObj=new ball(x,y,r,color,speedX,speedY);
          arr[i]=ballObj;
    }

    function ani(){
         ctx.clearRect(0,0,canvas.width,canvas.height)

         for(let i=0;i<arr.length;i++){

              arr[i].drawArc;
              arr[i].move();
         }
         window.requestAnimationFrame(ani);
    }
    ani();

    function random(a,b){
        return Math.ceil(Math.random()*(b-a)+a);
    }




</script>
</body>
</html>